<template>
  <!--  注意这里容器的类名！！官网的使用方法上的容器类名是swiper，对应Swiper7。但因为这里我下载的是Swiper6，所以我改成了它对应的容器类名swiper-container。  -->
  <!-- 在最外一层的容器中加入类swiper-no-swiping就可以禁止鼠标滑动了 -->
  <div class="swiper-container wrap" ref="Carousel">
    <div class="swiper-wrapper">
      <!-- v-for循环生成轮播图片 -->
      <div class="swiper-slide" v-for="(Carousel, index) in list" :key="index">
        <img :src="Carousel" class="goods_img" />
        <!-- <img src="../../assets/img/banner.f559b49d.png" alt="" /> -->
      </div>
    </div>

    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航左右按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>

<script>
import "swiper/swiper-bundle.min.css";
import Swiper from "swiper/swiper-bundle";

export default {
  data() {
    return {
      list: [
        require("../../assets/img/banner.f559b49d.png"),
        require("../../assets/img/10622.jpg"),
        require("../../assets/img/150 .jpg"),
        require("../../assets/img/0063ce30b72840e26333476068942c7d.jpeg"),
      ],
    };
  },
  watch: {
    //list是轮播图数据
    list: {
      immediate: true, //页面初始化的时候就调用一次handler()
      handler() {
        this.$nextTick(() => {
          var mySwiper = new Swiper(this.$refs.Carousel, {
            direction: "horizontal", // 水平切换选项
            loop: true, // 循环模式选项
            speed: 700, // 过渡时间
            autoplay: {
              delay: 2500, //1秒切换一次
              disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
              waitForTransition: false, // 等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
              pauseOnMouseEnter: true, // 开启此功能，鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
            },

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true, //可点击
              type: "bullets", //默认样式 小圆点, 还可选其他形状
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
          //6.6.2之前的版本需要通过代码实现此功能
          mySwiper.el.onmouseover = function () {
            mySwiper.autoplay.stop();
          };
          mySwiper.el.onmouseout = function () {
            mySwiper.autoplay.start();
          };
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-container {
  width: 1200px;
  height: 446px;
  .goods_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>